.index {
    height: 100%;

    .moveR-enter-active,
    .moveR-leave-active {
        transition       : all 0.2s linear;
        transform        : translateX(0);
        -ms-transform    : translateX(0);
        -moz-transform   : translateX(0);
        -webkit-transform: translateX(0);
        -o-transform     : translateX(0);
    }

    .moveR-enter,
    .moveR-leave {
        transform        : translateX(100%);
        -ms-transform    : translateX(100%);
        -moz-transform   : translateX(100%);
        -webkit-transform: translateX(100%);
        -o-transform     : translateX(100%);
    }

    .moveR-leave-to {
        transform        : translateX(100%);
        -ms-transform    : translateX(100%);
        -moz-transform   : translateX(100%);
        -webkit-transform: translateX(100%);
        -o-transform     : translateX(100%);
    }

    .bounce-enter-active {
        animation        : bounce-in .2s;
        -ms-animation    : bounce-in .2s;
        -moz-animation   : bounce-in .2s;
        -webkit-animation: bounce-in .2s;
        -o-animation     : bounce-in .2s;
    }

    .bounce-leave-active {
        animation        : bounce-in .2s reverse;
        -ms-animation    : bounce-in .2s reverse;
        -moz-animation   : bounce-in .2s reverse;
        -webkit-animation: bounce-in .2s reverse;
        -o-animation     : bounce-in .2s reverse;
    }

    .component-fade-enter-active,
    .component-fade-leave-active {
        transition        : opacity .2s ease;
        -ms-transition    : opacity .2s ease;
        -moz-transition   : opacity .2s ease;
        -webkit-transition: opacity .2s ease;
        -o-transition     : opacity .2s ease;
    }

    .component-fade-enter,
    .component-fade-leave-to

    /* .component-fade-leave-active for below version 2.1.8 */
        {
        opacity: 0;
    }

    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }

        50% {
            transform: scale(1.5);
        }

        100% {
            transform: scale(1);
        }
    }


    .right-enter,
    .right-leave-to {
        transform: translate3d(100%, 0, 0)
    }

    .right-leave,
    .right-enter-to {
        transform: translate3d(0, 0, 0)
    }

    .right-enter-active,
    .right-leave-active {
        transition: all .2s
    }


    .nav-top-show {
        height         : 60px;
        display        : flex;
        flex-direction : row;
        justify-content: space-between;
        flex           : 1;
    }

    .app-view {
        flex   : 1;
        display: flex;
        height : 100%;


        .app-view-left::-webkit-scrollbar {
            display: none
        }

        .logo {
            width           : 180px;
            text-align      : center;
            background-color: #001529;
            border-bottom   : 1px solid hsla(100%, 100%, 100%, 0.2);
            overflow        : hidden;
            transition      : all 0.05s;
            height          : 59px;
        }

        .nav-r-top {
            background-color: #ffffff;
            flex            : 1;
            display         : flex;
            flex-direction  : row;
            justify-content : space-between;
            height          : 60px;
            color           : #575555;

            .l-flex {
                display            : flex;
                -ms-flex-item-align: center;
                align-items        : center;
                min-width          : 400px;
                display            : flex;
                flex-direction     : row;
                cursor             : pointer;

                .show_icon {
                    width           : 25px;
                    height          : 30px;
                    transform       : rotate(0deg);
                    transition      : 0.38s;
                    transform-origin: 50% 50%;
                    margin          : 0 25px;
                }

                .show_icons {
                    width           : 25px;
                    height          : 30px;
                    transform       : rotate(90deg);
                    transition      : 0.38s;
                    transform-origin: 50% 50%;
                    margin          : 0px 15px;
                }

                // 展开-关闭
                .open_close {
                    padding: 0 20px;

                    i {
                        font-size: 20px;
                    }
                }
            }

            // 退出登录
            .log_out {
                display        : flex;
                width          : 400px;
                flex-direction : row;
                justify-content: space-between;
                font-size      : 14px;
                align-items    : center;
                color          : #ffffff;
                margin-right   : 40px;

                .login_user_title {
                    width          : 300px;
                    justify-content: space-around;
                    color          : #ffffff;

                    .el-dropdown-link {
                        cursor: pointer;
                        color : #ffffff;
                    }

                    .el-icon-arrow-down {
                        font-size: 12px;
                    }

                    .demonstration {
                        display      : block;
                        color        : #8492a6;
                        font-size    : 14px;
                        margin-bottom: 20px;
                    }
                }

                .log_out_btn {
                    width        : 80px;
                    height       : 35px;
                    line-height  : 35px;
                    text-align   : center;
                    background   : #ffffff;
                    border-radius: 30px;
                    color        : #4280f2;
                    cursor       : pointer;
                }
            }
        }

        //  修改面包屑
        .el-breadcrumb {
            width: auto;

            span {
                color: #999999 !important;
            }

            span:first-child {
                color      : #999999 !important;
                font-weight: 400;
            }

            span:last-child {
                color: #575555 !important;

                span {
                    color: #575555 !important;
                }
            }


        }

        //   .el-menu {
        //     border: none;
        //     .el-menu-item{
        //         border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
        //     }
        //   }

        //   .el-menu-vertical-demo {
        //     background-color: #5c5b65 !important;
        //     overflow-y      : auto !important;
        //   }

        //   .el-menu-vertical-demo:not(.el-menu--collapse) {
        //     width           : 180px;
        //     background-color: #5c5b65;
        //     transition      : border-color 0.3s, background-color 0.3s, color 0.3s;
        //     color           : #ffffff;
        //     font-size       : 13px !important;
        //     scrollbar-width : none;
        //     /* firefox */
        //     -ms-overflow-style: none;
        //     /* IE 10+ */
        //     overflow-x: hidden;
        //     overflow-y: auto;

        //     .el-menu {
        //       background-color: #5c5b65;

        //       i {
        //         color: #ffffff;
        //       }

        //       .el-submenu__title:hover,
        //       .el-submenu__title:focus {
        //         background-color: #5b5a64 !important;
        //         color           : white;
        //       }
        //     }

        //     .el-menu-item,
        //     .el-submenu__title {
        //       height     : 48px;
        //       line-height: 48px;
        //     }

        //     .el-submenu__title {
        //       color        : #ffffff;
        //       border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
        //       font-size    : 13px !important;
        //     }

        //     i,
        //     .el-menu-item {
        //       color    : #ffffff;
        //       font-size: 13px !important;
        //     }

        //     .el-submenu__title:focus{
        //       background-color:  rgba(36, 42, 49, 0.8) !important;
        //       color           : white;        
        //     }
        //     .el-submenu__title:hover {
        //       background-color:  #5b5a64 !important;
        //       color           : white;
        //     }

        //     .el-menu-item:focus{
        //       background-color: rgba(36, 42, 49, 0.8) !important;
        //       color           : white;
        //     }
        //     .el-menu-item:hover{
        //       background-color: #5b5a64 !important;
        //       color           : white;
        //     }

        //     .el-menu--inline li.el-menu-item {
        //       color        : #cccccc;
        //       border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
        //     }

        //     .el-menu--inline {
        //       background-color: rgb(53, 52, 65);
        //     }
        //   }


        //  导航菜单栏设置
        .app-view-left {
            overflow-y     : auto;
            scrollbar-width: none;
            /* firefox */
            // -ms-overflow-style: none; /* IE 10+ */
            overflow-x           : hidden;
            // 设置左侧全部背景
            background-color: #001529;


            .el-menu {
                border-right    : none;
                color           : hsla(0, 0%, 100%, .7) !important;
                background-color: #001529;
                font-size       : 13px;

                .el-submenu__title {
                    color: hsla(0, 0%, 100%, .7) !important;
                }


                //  移入标题
                .el-submenu__title:hover {
                    background-color: #001529;
                    color           : #ffffff !important;

                    i {
                        color: #ffffff !important;
                    }
                }

                //  单个菜单栏
                .el-menu-item1 {
                    background-color: #001529 !important;
                    color           : hsla(0, 0%, 100%, .7) !important;
                }

                //  修改背景颜色
                .el-menu-item-bk {
                    background-color: #2986F2 !important;
                    i{
                        color: #ffffff;
                    }
                }

                .el-menu-item-nobk {
                    background-color: #000000 !important;
                }

                .el-menu-item-nobk1 {
                    color           : hsla(0, 0%, 100%, .7) !important;
                    background-color: #001529;
                }
            }
        }





        .r-view {
            flex            : 1;
            background-color: #eceef2;
            overflow-y      : auto;

            .nav-Toviews::-webkit-scrollbar {
                display: none;
            }

            .nav-Toviews {
                scrollbar-width: none;
                /* firefox */
                -ms-overflow-style: none;
                /* IE 10+ */
                overflow-y     : auto;
                flex           : 1;
                justify-content: space-between;
                background     : #ffffff;

                .close-btn-all {
                    width          : 105px;
                    justify-content: space-around;
                    border-left    : 1px solid #DCDCDC;
                    margin-left    : 10px;

                    .btn {
                        padding        : 0px;
                        height         : 25px;
                        border         : 1px solid #4280f2;
                        color          : #4280f2;
                        width          : 80px;
                        font-size      : 13px;
                        justify-content: space-around;
                        border-radius  : 4px;

                        .btn-item {
                            width          : 85%;
                            margin         : 0 auto;
                            justify-content: space-between;
                            font-size      : 12px;

                            img {
                                width : 12px;
                                height: 12px;
                            }
                        }
                    }
                }
            }

            .nav-Toview {
                height     : 40px;
                background : #ffffff;
                display    : flex;
                padding    : 0px 10px;
                white-space: nowrap;
                flex       : 1;
                overflow   : hidden;

                .nav-Toview-item {
                    height         : 39px;
                    line-height    : 40px;
                    font-size      : 13px;
                    text-align     : center;
                    cursor         : pointer;
                    margin-left    : 10px;
                    display        : flex;
                    flex-direction : row;
                    justify-content: space-between;
                    align-items    : center;
                    color          : #333;
                    padding-left   : 5px;
                    padding-right  : 5px;

                    &.activeColor {
                        color        : #4280f2;
                        border-bottom: 2px solid #4280f2;
                    }

                    div {
                        text-align      : center;
                        transition      : all .3s cubic-bezier(.645, .045, .355, 1);
                        transform-origin: 100% 50%;
                        font-size       : 11px;
                        color           : #C0C0C0;
                        height          : 15px;
                        line-height     : 15px;
                        width           : 15px;
                        text-align      : center;
                        margin-left     : 5px;
                    }

                    div:hover {
                        background-color: #b4bccc;
                        color           : #fff;
                        border-radius   : 50%;
                        height          : 15px;
                        line-height     : 15px;
                        width           : 15px;
                        text-align      : center;
                    }

                }
            }
        }

        .login_user_title {
            height     : 25px;
            line-height: 25px;
        }
    }

    .el-image-viewer__wrapper .el-icon-circle-close {
        color: #ffffff;
    }
    .btn-area{
        margin-bottom: 22px;
    }
}

.el-menu-item.is-active {
    background: #000000 !important;
    color     : #ffffff;
}

//  打开子菜单 
.el-submenu__title.is-active {
    background: #000000 !important;
    color     : #ffffff;
}

.el-menu-item:focus,
.el-menu-item:hover {
    background: #000000 !important;
    color     : #ffffff;
}

.msg_info{
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #333;
    .msg_header{
        padding: 20px 12px;
    }
    .all-read{
        position: absolute;
        top: 20px;
        right: 12px;
        cursor: pointer;
        color: #409EFF;
    }
    .msg_item{
        display: flex;
        align-items: center;
        padding: 20px;
        cursor: pointer;
        &:first-child{
            border-top: 1px solid #eee;
        }
        &:nth-child(2n){
            background: #eee;
        }
        &:hover{
            background: #ccc;
        }
        .red_icon{
            margin-right: 12px;
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background: red;
        }
    }
}
